<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>
    Survey Form
  </title>
</head>

<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform.</p>
  <form id="survey-form">
    <label id="name-label" for="name">Name</label>
    <input id="name" type="text" placeholder="Enter your name" required />
    <br />
    <label id="email-label" for="email">Email</label>
    <input id="email" type="email" placeholder="Enter your email" required />
    <br />
    <label id="number-label" for="age">Age(optional)</label>
    <input id="number" type="number" placeholder="Enter your Age" min="3" max="100" />
    <p>Which option best describes your current role?</p>
    <select id="dropdown" aria-placeholder="Select current role">
      <option>Student</option>
      <option>Full Time Job</option>
      <option>Full Time Learner</option>
      <option>Prefer not to say</option>
      <option>Other</option>
    </select>
    <p>Would you recommend freeCodeCamp to a friend?</p>
    <label for="recommend-yes">Definitely</label>
    <input id="recommend-yes" type="radio" name="recommend" value="definitely" />
    <label for="recommend-no">Maybe</label>
    <input id="recommend-no" type="radio" name="recommend" value="maybe" />
    <label for="recommend-other" type="radio" name="recommend" value="not-sure">Not sure</label>
    <p>What is your favorite feature of freeCodeCamp?</p>
    <select id="dropdown" aria-placeholder="Select current role">
      <option>Challenges</option>
      <option>Projects</option>
      <option>Community</option>
      <option>Open Source</option>
    </select>
    <p>What would you like to see improved? (Check all that apply)</p>
    <label for="improve-1">Front-end Projects</label>
    <input id="improve-1" type="checkbox" name="improve" value="front-end-projects" />
    <label for="improve-2">Back-end Projects</label>
    <input id="improve-2" type="checkbox" name="improve" value="back-end-projects" />
    <label for="improve-3">Data Visualization</label>
    <input id="improve-3" type="checkbox" name="improve" value="data-visualization" />
    <label for="improve-4">Challenges</label>
    <label for="improve-5">Open Source</label>
    <input id="improve-5" type="checkbox" name="improve" value="open-source" />
    <label for="improve-6">Gitter help rooms</label>
    <input id="improve-6" type="checkbox" name="improve" value="gitter-help-rooms" />
    <label for="improve-7">Videos</label>
    <input id="improve-7" type="checkbox" name="improve" value="videos" />
    <label for="improve-8">City Meetups</label>
    <input id="improve-8" type="checkbox" name="improve" value="city-meetups" />
    <label for="improve-9">Wiki</label>
    <input id="improve-9" type="checkbox" name="improve" value="wiki" />
    <label for="improve-10">Forum</label>
    <input id="improve-10" type="checkbox" name="improve" value="forum" />
    <label for="improve-11">Add-ons</label>
    <input id="improve-11" type="checkbox" name="improve" value="add-ons" />
    <label for="improve-12">Active Community</label>
    <input id="improve-12" type="checkbox" name="improve" value="active-community" />
    <label for="improve-13">Improve the Docs</label>
    <input id="improve-13" type="checkbox" name="improve" value="improve-the-docs" />
    <label for="improve-14">Submit a PR</label>
    <input id="improve-14" type="checkbox" name="improve" value="submit-a-pr" />
    <label for="improve-15">Other</label>
    <input id="improve-15" type="checkbox" name="improve" value="other" />
    <p>Any comments or suggestions?</p>
    <textarea id="suggestions" name="suggestions" rows="4" cols="50" placeholder="Enter your suggestions"></textarea>
    <p>Submit</p>
    <button id="submit" type="submit">Submit</button>


  </form>
</body>

</html>